<template>
	<view class="sleep-week">
		<view class="sleep-echart">
			<view>
				<image src="/static/index/sleep-icon.png"></image>
				<text class="big-text">睡眠时长</text>
			</view>
			<view class="sleep-time">
				<text>平均时常<text class="big-text">8</text> 小时</text>
				<view class="tap">比上周平均减少38分钟</view>
			</view>
			<view class="echart">
				<sleepweekTimesVue></sleepweekTimesVue>
			</view>
		</view>
		<view class="sleep-echart">
			<view>
				<image src="/static/index/sleeped.png"></image>
				<text class="big-text">睡眠分布</text>
			</view>
			<view class="sleep-time">
				<text>平均入睡时间<text class="big-text">00:30</text></text>
				<text>平均起床时间<text class="big-text">8:31</text></text>
				<view class="tap">本周最早07:53起床，最晚02:12入睡</view>
			</view>
			<view class="echart">
				<sleepWeekDistributeVue></sleepWeekDistributeVue>
			</view>
		</view>
	</view>
</template>

<script setup>
import sleepweekTimesVue from '../../../ucharts/sleep/sleepweekTimes.vue';
import sleepWeekDistributeVue from '../../../ucharts/sleep/sleepWeekDistribute.vue';
</script>

<style scoped>
	.sleep-week{
		paddingr:0rpx 10rpx 0rpx 10rpx;
		margin-top:240rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
	
	}
	text,.tap{
		margin:8rpx 0rpx 0rpx 20rpx;
	}
	.sleep-echart{
		flex: 1;
		min-height:45%;
		display:flex;
		flex-direction: column;
		justify-content: flex-start;
		margin:10rpx 20rpx;
		padding-top:20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		border-radius: 25rpx;
	}
	.sleep-echart view:nth-child(1){
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.sleep-echart view:nth-child(2){
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-top:10rpx;
	}
	image{
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}
	.echart{
		width:100%;
		height:80%;
		margin-top:20rpx;
	}
	.tap{
		background-color: #d3d3d3;
		color: #699cef;
		width: 95%;
		height:40rpx;
		font-size: 24rpx;
		border-radius:15rpx;
		text-indent:0.5em;
	}
	.sleep-time>text{
		font-size:14px;
	}
    .big-text{
		font-weight: bold;
	}
</style>